<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div.tp1{
            width: 1516px;
            height: 780px;
            background-color: #f4f0ea;
        }
        div.tp1 div.tuijian{
            padding-top: 50px;
            margin-bottom: 30px;
        }
        div.tp1 div.tuijian span{
            font-size: 28px;
            font-weight: 700;
            line-height: 1;
            margin-left: 215px;
            margin-right: 20px;
            float: left;

        }
        div.tp1 div.tuijian a{
            text-align: center;
            font-size: 14px;
            line-height: 28px;
            margin-right: 50px;
            text-decoration: none;
        }
        div.tp1 div.tuijian a:hover,div.tp1 div.tuijian span:hover{
            color: #b17433;
            
        }
        div.tp1 div.tuijian a:active{
            text-decoration: underline;
        }
        div.tp12{
            width: 1090px;
            height: 570px;
            background-color: #f4f0ea;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
           
        }
        div.tp12 div.tp124{
             width: 223px;
             height: 570px;
             /* background-color: red; */
             display: flex;
             flex-direction: column;
             justify-content: space-between;
        }
        
        
        div.tp12 div.tp123{
            width: 390px;
        }
        div.tp12>div.tp124 div{
            width: 223px;
            height: 280px;
            /* background-color: green; */
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            background-color: white;
        }
        div.tp12 div.tp124 div div:first-child{
            width: 223px;
            height: 180px;
            /* background-color: yellow;
             */
             /* background-color: white; */
        }
        div.tp12 div.tp124 div div:last-child{
            width: 223px;
            height: 92px;
            /* background-color: white; */
        } 
        div.tp12 div.tp124 div div:first-child img{
            width: 223px;
            height: 180px;
        }
        
        div.tp12 div.tp123 {
            width: 390px;
            height: 570px;
            /* background-color: orange; */
            display: flex;
            justify-content: space-between;
            background-color: white;
           
        }
        div.tp12 div.tp123 div:first-child{
            width: 390px;
            height: 320px;
            /* background-color: yellow; */
            margin-bottom: 40px;
            margin-top: 30px;
        }
        div.tp12 div.tp123 div:first-child img{
            width: 390px;
            height: 320px;
        }
        div.tp12 div.tp123 div:last-child{
            width: 390px;
            height: 150px;
            /* background-color: pink; */

        }
        div.tp12 div div:last-child p{
            text-align: center;
        }
        div.tp12 div div:last-child .one_span{
            background-color: #e36844;
            display: inline-block;
            height: 20px;
            line-height: 20px;
            color: white;
            padding: 0 5px;
            font-size: 14px;
        }
        div.tp12 div div:last-child p:nth-child(2){
           
            font-size: 14px;
            
            margin: 0 auto;
            line-height:25px ;
            padding-top: 5px;
           
           
        }
        div.tp12 div div:last-child p:nth-child(2):hover{
            color: #b17433;
        }
        div.tp12 div.tp123 div:last-child p:nth-child(2){
            width: 248px;
            height: 52px;
            font-size: 18px;
            
            margin: 0 auto;
            line-height:25px ;
            padding-top: 5px;
            margin-top: 10px;
            margin-bottom:10px ;
            font-family: "Microsoft Yahei","微软雅黑",verdana;
        }
        div.tp12 div div:last-child p .three_one{
            color: #d4282d;
            font-size: 18px;
            height: 18px;
            line-height: 1;
            display: inline-block;
            margin-bottom: 20px; 
            
        }
        div.tp12 div div:last-child p .three_two{
            color: #999;
            font-size: 14px;
            text-decoration: line-through;
            line-height: 1;
           
        }

    </style>
</head>
<body>
    <div class="tp1">
        <div class="tuijian">
            <span >人气推荐 </span>
            <a href="">编辑推荐 </a>
            <a href="">热销总榜</a>
            </div>
        <div class="tp12">
           
            <div class="tp123">
                <div>
                    <div>
                        <img src="../d9-4css/day9/wyyx/猫粮.webp" alt="">

                    </div>
                    <div>
                        <p><span class="one_span">新品限时购</span></p>
                        <p>每一口都有七种肉，全价猫粮 1.8千克</p>
                        <p><span class="three_one">￥78</span><span class="three_two">￥88</span></p>
                    </div>
                </div>
            </div>
            <div class="tp124">
                <div>
                    <div>
                        <img src="../d9-4css/day9/wyyx/洗衣液.webp" alt="">
                    </div>
                    <div>
                        <p><span class="one_span">新品限时购</span></p>
                        <p>清新英国梨香 强力去污酵素洗衣液3kg/1kg</p>
                        <p><span class="three_one">￥29.9</span><span class="three_two">￥35</span></p>  
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../d9-4css/day9/wyyx/凤爪.webp" alt="">
                    </div>
                    <div>
                        <p><span class="one_span">新品限时购</span></p>
                        <p>告别啃食尴尬，秘制无骨凤爪 <br> 108克</p>
                        <p><span class="three_one">￥13</span><span class="three_two">￥22</span></p> 
                    </div>
                </div>
            </div>
            <div class="tp124">
                <div>
                    <div>
                        <img src="../d9-4css/day9/wyyx/口罩.webp" alt="">
                    </div>
                    <div>
                        <p><span class="one_span">新人特价</span></p>
                            <p>一次性医用级三层口罩</p>
                            <p><span class="three_one">￥20</span><span class="three_two">￥139</span></p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../d9-4css/day9/wyyx/拖鞋.webp" alt="">
                    </div>
                    <div>
                            <p><span class=" one_span">新人特价</span></p>
                            <p><span>轻弹云朵居家拖鞋</span></p>
                            <p><span class="three_one">￥9.9</span></p>
                    </div>
                </div>
            </div>
            <div class="tp124">
                <div>
                    <div>
                        <img src="../d9-4css/day9/wyyx/手套.webp" alt="">
                    </div>
                    <div>
                            <p><span class="one_span">新人特价</span></p>
                            <p>隔绝油污贴手舒适一次性橡胶手套100只</p>
                            <p><span class="three_one">￥19.9</span><span class="three_two">￥29</span></p>
                    </div>
                </div>
                <div>
                    <div>
                        <img src="../d9-4css/day9/wyyx/咖啡.webp" alt="">
                    </div>
                    <div>
                       <p> <span class="one_span">每满300减45卷</span></p>
                        <p>口袋里的咖啡馆 日本浓缩胶囊咖啡液</p>
                        <p><span class="three_one">￥21.8</span></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>